import React from "react";
import { NavBar } from "react-vant";
import { Steps } from "antd-mobile";
import { useNavigate } from "react-router";
import styles from "./index.module.css";
import hui2 from "./images/hui2.jpg";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const { Step } = Steps;
  return (
    <div className={styles.mima}>
      <div className={styles.nav}>
        <NavBar title="服务介绍" onClickLeft={() => navigate("/hui")} />
      </div>
      <div className={styles.fu}>
        <div className={styles.card}>
          <div className={styles.Ka}>
            <div>
              <h4>私家医生卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <div className={styles.pric}>￥999</div>
            </div>
            <img src={hui2} alt="" />
          </div>
        </div>
        <div className={styles.quan}>
          <h2>权益介绍</h2>
        </div>
        <div className={styles.tableall}>
          <h3>服务说明</h3>
          <table className={styles.table}>
            <thead>
              <tr>
                <th style={{ borderRadius: "8px 0 0 0" }}>服务项目</th>
                <th>套餐权益</th>
                <th style={{ borderRadius: "0 8px 0 0" }}>使用期限</th>
              </tr>
            </thead>
            <tbody>
              <tr className={styles.trtd}>
                <td rowSpan={3}>私人医生</td>
                <td>报告解读</td>
                <td>1次</td>
              </tr>
              <tr className={styles.trtd}>
                <td>家庭医生</td>
                <td rowSpan={2}>不限次，限持卡者本人使用</td>
              </tr>
              <tr>
                <td>名医咨询</td>
              </tr>
              <tr className={styles.trtd}>
                <td rowSpan={2}>就医用药</td>
                <td>预约挂号</td>
                <td rowSpan={2}>不限次，限持卡者本人使用</td>
              </tr>
              <tr>
                <td>复诊购药</td>
              </tr>
              <tr className={styles.trtd}>
                <td rowSpan={4} style={{ borderRadius: "0 0 0 8px" }}>
                  健康管理
                </td>
                <td>健康测评</td>
                <td rowSpan={4} style={{ borderRadius: "0 0 8px 0" }}>
                  不限次
                </td>
              </tr>
              <tr>
                <td>健康档案</td>
              </tr>
              <tr>
                <td>健康顾问</td>
              </tr>
              <tr>
                <td>健康科普</td>
              </tr>
            </tbody>
          </table>
          <h2>报告解读</h2>
          <p>
            通过线上由临床一线医生为客户解读体检报告单，提供日常健康指导建议。
          </p>
          <h2>家庭医生</h2>
          <p>
            客户可通过电话的方式与具有专业医学背景的医生进行一对一交流，提供日常疾病预防、保健、康复及其他健康问
            诊服务。
          </p>
          <h2>名医咨询</h2>
          <p>
            提供全国公立医院多年资医生在线问诊服务，包含常见急
            症处理、日常疾病预防和治疗、症状或体征答疑、季节病
            的预防与治疗建议、康复指导、药品处方等各类医疗服 务。
          </p>
          <h2>预约挂号</h2>
          <p>
            提供全国各大医院常规门诊挂号服务，覆盖95%以上公
            立医院，为线下就医提供便捷通道。
          </p>
          <h2>复诊购药</h2>
          <p>
            通过线上向医生发起复诊咨询，由医生根据客户实际情况提供电子处方，并可直接下单购买、快递送货到家。
          </p>
          <h2>健康测评</h2>
          <p>
            提供基于临床医学结合大数据研发的智能评测系统，涵盖内分泌、心理健康等方面，帮助客户了解自身基本情况。
          </p>
          <h2>健康档案</h2>
          <p>
            集合客户在本平台的健康相关信息汇总个人档案，并在每
            次健康服务后更新，实时掌握个人健康信息。
          </p>
          <h2>健康顾问</h2>
          <p>提供健康专线，由健康助理提供一对一专属健康服务。</p>
          <h2>健康科普</h2>
          <p>
            提供普及性健康知识与信息，帮助了解日常饮食、运动健身、心理健康、疾病预防、医疗保健等方面内容。
          </p>
        </div>
        <div className={styles.ji}>
          <h3>激活码激活流程</h3>
          <Steps
            direction="vertical"
            current={0}
            style={{
              // "--title-font-size": "16px",
              "--description-font-size": "15px",
              "--indicator-margin-right": "12px",
              "--icon-size": "22px",
            }}
          >
            <Step title="登录" icon={<div className={styles.yuan}>1</div>} />
            <Step
              title="点击首页会员卡激活-“立即激活”按钮"
              icon={<div className={styles.yuan}>2</div>}
            />
            <Step
              title="输入激活码"
              icon={<div className={styles.yuan}>3</div>}
            />
            <Step
              title="激活完成"
              icon={<div className={styles.yuan}>4</div>}
            />
          </Steps>
        </div>
        <div className={styles.ji}>
          <h3>线上支付激活流程</h3>
          <Steps
            direction="vertical"
            current={0}
            style={{
              // "--title-font-size": "17px",
              "--description-font-size": "15px",
              "--indicator-margin-right": "12px",
              "--icon-size": "22px",
            }}
          >
            <Step title="登录" icon={<div className={styles.yuan}>1</div>} />
            <Step
              title="在会员服务模块找到对应会员卡"
              icon={<div className={styles.yuan}>2</div>}
            />
            <Step
              title="点击立即开通，支付费用"
              icon={<div className={styles.yuan}>3</div>}
            />
            <Step
              title="激活完成"
              icon={<div className={styles.yuan}>4</div>}
            />
          </Steps>
        </div>
        <div className={styles.shi}>
          <h2>使用说明</h2>
          <p>1.激活后默认自动使用卡内健康服务项;</p>
          <p>2.本卡不记名、不挂失，请妥善保管;</p>
          <p>3.本卡不可转赠、不退换、限持卡人本人使用;</p>
          <p>注:7*24小时特指服务响应时间。</p>
        </div>
      </div>
    </div>
  );
};

export default Index;
